<!--
 * @descripttion: 
 * @author: cp
 * @Date: 2021-04-25 19:47:09
-->
<template>
  <div>
    <h1>登录</h1>
      <a-form :model="userInfo" :wrapper-col="wrapperCol" :rules="rules">
        <a-form-item label="用户名" prop="userName">
          <a-input v-model:value="userInfo.userName" />
        </a-form-item>
        <a-form-item label="密码" prop="password">
          <a-input type="password" v-model:value="userInfo.password" />
        </a-form-item>
      </a-form>
    <div>
      <a-button type="primary" @click="handleLogin">登录</a-button>
      <a-button @click="handleReg">注册</a-button>
    </div>
  </div>
</template>

<script lang="ts">
import {reactive, toRefs, toRaw, defineComponent} from 'vue';
import { useRouter } from 'vue-router';
import {login} from '../../api/user'
export default defineComponent({
  setup () {
    const router = useRouter() 
    const data = reactive({
      userInfo: {
        userName: '',
        password: '',
      },
      handleLogin() {
        let req = toRaw(data.userInfo)
        login(req).then((res: any) => {
          console.log(res)
        })
      },
      handleReg() {
        router.push('/registered')
      },
    })
    const rules = {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    return {
      rules,
      ...toRefs(data)
    }
  }
})
</script>

<style>

</style>